<!--举报统计页面-->
<style lang="less">
.count1 {
  margin: 15px;
  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    display: inline-block;
    .searchInput {
      width: 200px;
      margin-right: 15px;
    }
  }
  .smallArr {
    width: 15%;
    display: inline-block;
  }
  .chart {
    height: 300px;
    margin-top: 15px;
  }
  .ivu-table td,
  .ivu-table th {
    height: 35px !important;
  }
}
.user-count {
  .ivu-modal-body {
    margin-bottom: 15px !important;
  }
}
.bg-red {
  color: red;
}
</style>

<template>
  <div class="count1">
    <Row :gutter="16">
      <Col span='12'>
      <Card :bordered="false">
        <p slot="title"
           class="white">统计分析 > <span class="select-font">事件统计管理(行政区域划分)</span></p>
        <div>
          <Form :model="searchItem"
                class="smallForm">
            <DatePicker type="date"
                        placeholder="选择开始时间"
                        :value="searchItem.start_time"
                        @on-change="changeAreaStartDate"
                        format="yyyy-MM-dd"
                        class="searchInput"></DatePicker>
            <DatePicker type="date"
                        placeholder="选择结束时间"
                        :value="searchItem.end_time"
                        @on-change="changeAreaEndDate"
                        format="yyyy-MM-dd"
                        class="searchInput"></DatePicker>
            <Select v-model="searchItem.user_type"
                    clearable
                    class="searchInput">
              <Option value="1">微信投诉</Option>
              <Option value="2">河长事件</Option>
              <Option value="3">电话信访</Option>
            </Select>
            <Button type="info"
                    @click="getData('禅城区')">搜索</Button>
          </Form>
        </div>
      </Card>
      <div style="margin-top: 15px">
        <Table :data="countData1"
               :columns="countColumns1"
               stripe></Table>
        <div class="chart"
             style="height:400px">

        </div>
      </div>
      </Col>
      <Col span='12'>
      <Card :bordered="false">
        <p slot="title"
           class="white">统计分析 > <span class="select-font">事件统计管理(按河流划分)</span></p>
        <div>
          <Form :model="searchItem"
                class="smallForm">
            <DatePicker type="date"
                        @on-change="changeRiverStartDate"
                        :value="searchItem.start_time1"
                        format="yyyy-MM-dd"
                        placeholder="选择开始时间"
                        style="width: 150px;margin-right: 15px"></DatePicker>
            <DatePicker type="date"
                        @on-change="changeRiverEndDate"
                        :value="searchItem.end_time1"
                        format="yyyy-MM-dd"
                        placeholder="选择结束时间"
                        style="width: 150px;margin-right: 15px"></DatePicker>
            <Select clearable
                    v-model="searchItem.level"
                    on-change="aa"
                    style="width: 150px;margin-right: 15px"
                    placeholder="请选择等级">
              <Option value="市级">市级</Option>
              <Option value="区级">区级</Option>
              <Option value="镇级">镇级</Option>
            </Select>
            <area-select @getData="getAreaData"
                         style="width: 150px;margin-right: 15px"></area-select>
            <Button type="info"
                    @click="getRiverData(1)">搜索</Button>
          </Form>
        </div>
      </Card>
      <div style="margin-top: 15px">
        <Table :data="countData"
               :columns="countColumns"
               stripe></Table>
        <Page class="pull-right"
              :total="Page.total"
              :current="Page.current"
              :page-size="Page.pageSize"
              size="small"
              show-total
              @on-change="changePage"></Page>
        <div class="chart"
             style="height:300px">

        </div>
      </div>
      </Col>
    </Row>
    <Modal class="user-count"
           v-model="reportModal"
           :mask-closable="false"
           title="查看事件"
           width="1400">
      <Table ref="table"
             :data="reportData"
             :columns="reportColumns"
             stripe></Table>
      <div slot="footer">
        <Button type="success"
                @click="exportData">导出数据</Button>
        <Button @click="reportModal = false">取消</Button>
      </div>
      <Page class="pull-right"
            :total="reportPage.total"
            :current="reportPage.current"
            :page-size="reportPage.pageSize"
            ref="page"
            size="small"
            show-total
            @on-change="changeReportPage"></Page>
    </Modal>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import { userLineChart } from 'common/js/echart';
import areaSelect from '../../public/areaSelect';
export default {
  components: {
    'area-select': areaSelect,
  },
  data() {
    return {
      urlTownChart: '/stat/report/statbytown',
      urlRiverChart: '/stat/report/statbyriver',
      reportList: '/emergency/report/stattownreportlist',
      searchItem: {
        start_time: '',
        end_time: '',
        start_time1: '',
        end_time1: '',
        level: '',
        area: {},
        user_type: '',
      },
      Page: {
        current: 1,
        pageSize: 8,
        total: 0,
      },
      reportPage: {
        current: 1,
        pageSize: 8,
        total: 0,
      },
      countData: [],
      reportModal: false,
      countColumns: [
        {
          title: '河流名称',
          key: '_id',
        },
        {
          title: '举报次数',
          key: 'num',
        },
      ],
      countData1: [],
      reportData: [],
      reportColumns: [
        {
          title: '举报编号',
          key: 'report_no',
        },
        {
          title: '河名',
          key: 'river_name',
        },
        {
          title: '状态',
          key: 'solve_is',
        },
        {
          title: '经度',
          key: 'lng',
        },
        {
          title: '纬度',
          key: 'lat',
        },
        {
          title: '举报时间',
          key: 'report_time',
        },
        {
          title: '受理时间',
          key: 'complete_time',
        },
        {
          title: '处理时间',
          key: 'solve_time',
        },
        {
          title: '负责河长',
          key: 'realname',
        },
        {
          title: '事件来源',
          key: 'come',
        },
        {
          title: '事件上报人',
          key: 'contacts',
        },
        {
          title: '河长级别',
          key: 'chief_user_type',
        },
        {
          title: '描述',
          key: 'overview',
          width: 200,
        },
        {
          title: '事件效率评分',
          key: 'speed',
        },
        {
          title: '事件态度评分',
          key: 'attitude',
        },
        {
          title: '事件综合得分',
          key: 'merge',
        },
        {
          title: '群众评价',
          key: 'evaluate',
        },
      ],
      townColumns: [
        {
          title: '河长办名称',
          key: 'name',
        },
        {
          title: '事件次数',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.overType = '';
                    this.getReport(0, params.row.name);
                    this.$refs.page.currentPage = 1;
                    this.reportModal = true;
                  },
                },
              },
              params.row.num
            );
          },
        },
        {
          title: '处理中事件次数',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.overType = '';
                    this.getReport(0, params.row.name, '处理中');
                    this.$refs.page.currentPage = 1;
                    this.reportModal = true;
                  },
                },
              },
              params.row.solve_is_ing
            );
          },
        },
        {
          title: '已处理事件次数',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.overType = '';
                    this.getReport(0, params.row.name, '已处理');
                    this.$refs.page.currentPage = 1;
                    this.reportModal = true;
                  },
                },
              },
              params.row.solve_is_over
            );
          },
        },
        {
          title: '处理超时事件次数',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.overType = 'over_all';
                    this.getReport(0, params.row.name, null, false, false);
                    this.$refs.page.currentPage = 1;
                    this.reportModal = true;
                  },
                },
              },
              params.row.is_overday
            );
          },
        },
        {
          title: '当前受理超时',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.overType = 'over_complete';
                    this.getReport(0, params.row.name, null, false, true);
                    this.$refs.page.currentPage = 1;
                    this.reportModal = true;
                  },
                },
              },
              params.row.overday_now_complete
            );
          },
        },
        {
          title: '当前处理超时',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.overType = 'over_solve';
                    this.getReport(0, params.row.name, null, false, true);
                    this.$refs.page.currentPage = 1;
                    this.reportModal = true;
                  },
                },
              },
              params.row.overday_now_solve
            );
          },
        },
      ],
      countColumns1: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h('Table', {
              props: {
                data: params.row.towns,
                columns: this.townColumns,
              },
            });
          },
        },
        {
          title: '区域',
          key: '_id',
        },
        {
          title: '事件次数',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.overType = '';
                    this.getReport(1, params.row._id);
                    this.$refs.page.currentPage = 1;
                    this.reportModal = true;
                  },
                },
              },
              params.row.num
            );
          },
        },
        {
          title: '处理中事件次数',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.overType = '';
                    this.getReport(1, params.row._id, '处理中');
                    this.$refs.page.currentPage = 1;
                    this.reportModal = true;
                  },
                },
              },
              params.row.solve_is_ing
            );
          },
        },
        {
          title: '已处理事件次数',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.overType = '';
                    this.getReport(1, params.row._id, '已处理');
                    this.$refs.page.currentPage = 1;
                    this.reportModal = true;
                  },
                },
              },
              params.row.solve_is_over
            );
          },
        },
        // {
        //   title: '处理超时事件次数',
        //   render: (h, params) => {
        //     return h(
        //       'div',
        //       {
        //         style: {
        //           cursor: 'pointer',
        //         },
        //         on: {
        //           click: () => {
        //             this.overType = 'over_all';
        //             this.getReport(1, params.row._id, null, false, false);
        //             this.$refs.page.currentPage = 1;
        //             this.reportModal = true;
        //           },
        //         },
        //       },
        //       params.row.is_overday
        //     );
        //   },
        // },
        {
          title: '当前受理超时',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.overType = 'over_complete';
                    this.getReport(1, params.row._id, null, false, true);
                    this.$refs.page.currentPage = 1;
                    this.reportModal = true;
                  },
                },
              },
              params.row.overday_now_complete
            );
          },
        },
        {
          title: '当前处理超时',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.overType = 'over_solve';
                    this.getReport(1, params.row._id, null, false, true);
                    this.$refs.page.currentPage = 1;
                    this.reportModal = true;
                  },
                },
              },
              params.row.overday_now_solve
            );
          },
        },
      ],
      actionPage: '',
      save: {},
      overType: '',
    };
  },
  methods: {
    changeAreaStartDate(data) {
      this.searchItem.start_time = data;
    },
    changeAreaEndDate(data) {
      this.searchItem.end_time = data;
    },
    changeRiverStartDate(data) {
      this.searchItem.start_time1 = data;
    },
    changeRiverEndDate(data) {
      this.searchItem.end_time1 = data;
    },
    exportData() {
      this.getReport(
        this.save.type,
        this.save.area,
        this.save.solve_is,
        this.save.over,
        this.save.now,
        1,
        0
      );
    },
    getReport(type, area, solve_is, over, now, page = 1, pageSize = 8) {
      this.save = {
        type,
        area,
        solve_is,
        over,
        now,
      };
      let params = {
        data: {
          searchValue: {
            river_name: '测试河|#|ne',
          },
          basis: 0,
          page,
          pageSize,
        },
        token: storage.session.get('token'),
        url: this.reportList,
        success: res => {
          this.$Loading.finish();
          // 判断数据非空
          this.reportData = res.data.result && Object.keys(res.data.result).length !== 0 ? res.data.result.result.length > 0 ? res.data.result.result : [] : [];
          this.reportPage.total = res.data.result.totalSize;
          this.reportData.map(item => {
            if (item.user_type == '1') {
              item.come = '微信投诉';
            } else if (item.user_type == '2') {
              item.come = '河长事件';
            } else if (item.user_type == '3') {
              item.come = '电话信访';
            }
            if (item.respon_chief) {
              item.realname = item.respon_chief.realname;
            } else {
              item.realname = '暂无数据';
            }
            // 河长级别
            if (item.chief_user_type==='1'){
              item.chief_user_type = '镇级'
            } else if (item.chief_user_type==='2'){
              item.chief_user_type = '区级'
            } else if (item.chief_user_type==='0'){
              item.chief_user_type = '村级'
            }

            if (item.score) {
              item.speed = item.score.speed;
              item.attitude = item.score.attitude;
              item.merge = item.score.merge;
              item.evaluate = item.score.evaluate;
            } else {
              item.speed = '无';
              item.attitude = '无';
              item.merge = '无';
              item.evaluate = '无';
            }
          });
        },
      };
      if (type === 1) {
        if (area !== '佛山市') {
          params.data.searchValue['location.area'] = `${area}|#|like`;
        }
      } else if (type === 0) {
        params.data.searchValue['location.dep_name'] = `${area}|#|like`;
      }
      if (solve_is) {
        params.data.searchValue.solve_is = solve_is;
      }
      if (over) {
        params.data.searchValue.is_overday = '1';
      }
      if (now) {
        let today = new Date().format('yyyy-MM-dd');
        params.data.searchValue.solve_is = '处理中';
        params.data.searchValue.plan_time = `${today}|#|lt`;
      }
      if (this.searchItem.start_time !== '') {
        params.data.searchValue.report_time = `${this.searchItem.start_time} 00:00:00|#|gte`;
        if (this.searchItem.end_time !== '') {
          params.data.searchValue.report_time = `${this.searchItem.start_time} 00:00:00|#|${this.searchItem.end_time} 23:59:59`;
        }
      }
      if (this.searchItem.end_time !== '') {
        params.data.searchValue.report_time = `${this.searchItem.end_time} 23:59:59|#|lte`;
        if (this.searchItem.start_time !== '') {
          params.data.searchValue.report_time = `${this.searchItem.start_time} 00:00:00|#|${this.searchItem.end_time} 23:59:59`;
        }
      }
      if (
        this.searchItem.end_time === '' &&
        this.searchItem.start_time === ''
      ) {
        let month = new Date().format('yyyy-MM');
        let today = new Date().format('yyyy-MM-dd');
        params.data.searchValue.report_time = `${month}-01 00:00:00|#|${today} 23:59:59`;
      }
      if (this.searchItem.user_type !== '') {
        params.data.searchValue.user_type = this.searchItem.user_type;
      }
      if (this.overType !== '') {
        params.data.swithcShow = this.overType;
      }
      if (pageSize === 0) {
        params.success = res => {
          // 判断数据非空
          let allData = res.data.result && Object.keys(res.data.result).length !== 0 ? res.data.result.result.length > 0 ? res.data.result.result : [] : [];
          allData.map(item => {
             // 河长级别
            if (item.chief_user_type==='1'){
              item.chief_user_type = '镇级'
            } else if (item.chief_user_type==='2'){
              item.chief_user_type = '区级'
            } else if (item.chief_user_type==='0'){
              item.chief_user_type = '村级'
            }

            if (item.user_type == '1') {
              item.come = '微信投诉';
            } else if (item.user_type == '2') {
              item.come = '河长事件';
            } else if (item.user_type == '3') {
              item.come = '电话信访';
            }
            if (item.respon_chief) {
              item.realname = item.respon_chief.realname;
            } else {
              item.realname = '暂无数据';
            }
            if (item.score) {
              item.speed = item.score.speed;
              item.attitude = item.score.attitude;
              item.merge = item.score.merge;
              item.evaluate = item.score.evaluate;
            } else {
              item.speed = '无';
              item.attitude = '无';
              item.merge = '无';
              item.evaluate = '无';
            }
          });
          let columns = JSON.parse(JSON.stringify(this.reportColumns));
          columns.push({
            title: '初步办理意见',
            key: 'complete_opinion',
          });
          columns.push({
            title: '处理结果',
            key: 'solve_result',
          });
          columns.push({
            title: '处理结果图片',
            key: 'solve_file',
          });
          columns.push({
            title: '回复处理结果',
            key: 'reply_result',
          });
          this.$refs.table.exportCsv({
            filename: '事件数据',
            columns,
            data: allData,
            quoted: true,
          });
        };
      }
      ajaxPost(params);
    },
    getData(name) {
      let params = {
        data: {},
        url: this.urlTownChart,
        token: storage.session.get('token'),
        success: res => {
          this.countData1 = res.data.result;
          this.$Loading.finish();
          let el = document.getElementsByClassName('chart')[0];
          let data = [];
          let data1 = [];
          let legend = [];
          let title = `${name}各镇举报统计`;
          res.data.result.map((item, index) => {
            if (index > 0) {
              data1.push({ value: item.num, name: item._id });
              if (item._id === name) {
                item.towns.map(items => {
                  legend.push(items.name);
                  data.push({ value: items.num, name: items.name });
                });
              }
            }
          });
          this.creatCircle(el, title, data1, data, legend);
        },
      };
      if (this.searchItem.start_time !== '') {
        params.data.start_time = this.searchItem.start_time;
      }
      if (this.searchItem.end_time !== '') {
        params.data.end_time = this.searchItem.end_time;
      }
      if (this.searchItem.user_type != '') {
        params.data.user_type = this.searchItem.user_type;
      }
      ajaxPost(params);
    },
    getRiverData(page = 1) {
      let params = {
        data: {
          page,
          pageSize: this.Page.pageSize,
        },
        url: this.urlRiverChart,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.countData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
          let xaxis = [];
          let num = [];
          res.data.result.result.map(item => {
            xaxis.push(item._id);
            num.push(item.num);
          });
          let el = document.getElementsByClassName('chart')[1];
          userLineChart(xaxis, num, el, ['河流事件次数'], 'bar');
        },
      };
      if (this.searchItem.start_time1 !== '') {
        params.data.start_time = this.searchItem.start_time1;
      }
      if (this.searchItem.end_time1 !== '') {
        params.data.end_time = this.searchItem.end_time1;
      }
      if (this.searchItem.level !== '') {
        params.data.level = this.searchItem.level;
      }
      if (
        this.searchItem.area !== undefined &&
        this.searchItem.area.name !== undefined
      ) {
        if (this.searchItem.area.level == '2') {
          params.data.area = this.searchItem.area.name;
        } else if (this.searchItem.area.level == '3') {
          params.data.town = this.searchItem.area.name;
        }
      }
      ajaxPost(params);
    },
    changePage(page) {
      this.getRiverData(page);
      this.actionPage = page;
    },
    changeReportPage(page) {
      this.getReport(
        this.save.type,
        this.save.area,
        this.save.solve_is,
        this.save.over,
        this.save.now,
        page
      );
    },
    creatCircle(el, title, data1, data, legend) {
      let option = {};
      let myChart = echarts.init(el);
      option = {
        color: [
          '#A252E6',
          '#5952E6',
          '#EE5451',
          '#AEDB97',
          '#F756CB',
          '#FFB03E',
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          data: legend,
          textStyle: {
            fontSize: '12px',
          },
        },
        series: [
          {
            name: '佛山各区举报数量',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              normal: {
                position: 'inner',
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: data1,
          },
          {
            name: title,
            type: 'pie',
            radius: ['40%', '55%'],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            data,
          },
        ],
      };
      myChart.setOption(option);
      myChart.on('click', params => {
        if (
          params.name === '顺德区' ||
          params.name === '高明区' ||
          params.name === '三水区' ||
          params.name === '南海区' ||
          params.name === '禅城区'
        ) {
          this.getData(params.name);
        }
      });
    },
    getAreaData(data) {
      this.searchItem.area = data;
    },
  },
  mounted() {
    this.searchItem.start_time1 = `${new Date().format('yyyy-MM')}-01`;
    this.searchItem.end_time1 = new Date().format('yyyy-MM-dd');
    this.searchItem.start_time = `${new Date().format('yyyy-MM')}-01`;
    this.searchItem.end_time = new Date().format('yyyy-MM-dd');
    this.getData('禅城区');
    this.getRiverData(1);
  },
  watch: {
    'searchItem.stat_inval'(data) {
      this.getTimeList();
    },
  },
};
</script>
